<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./index.js"></script>
    <script>
      const proxyUser = shallowReactive({
        name: "小米",
        car: {
          color: "red",
        },
      });
      // proxyUser.name='=='
      // proxyUser.name+='=='
      // proxyUser.car.color +='==='//拦截到了读但是拦截不到写  浅层监视
      // delete proxyUser.name
      // delete proxyUser.car.color//浅层监视 拦截到了读取的数据 删除不了
      const proxyUser1 = reactive({
        name: "小米",
        car: {
          color: "red",
        },
      });
      // proxyUser1.name='=='
      // proxyUser1.name+='=='
      // proxyUser1.car.color +='==='
      // delete proxyUser1.name
      // delete proxyUser1.car.color
      const proxyUser2 = shallowReadonly({
        name: "小爱",
        car: ["奔驰", "玛莎拉蒂"],
      });
      // proxyUser2.name ='==='
      // console.log(proxyUser2.name);
      // delete proxyUser2.name
      // proxyUser2.car[0]='奥迪'
      // delete proxyUser2.car[0]
      const proxyUser3 = readonly({
        name: "小爱",
        car: ["奔驰", "玛莎拉蒂"],
      });
      // proxyUser3.name ='==='
      // console.log(proxyUser3.name);
      // delete proxyUser3.name
      // proxyUser3.car[0]='奥迪'
      // delete proxyUser3.car[0]
      const ref1 = shallowRef({
        name: "小爱",
        car: {
          color: "red",
        },
      });
      // console.log(ref1.value);
      // ref1.value='=='
    //   ref1.value.car = "==";
    const ref2 = ref({
        name: "小爱",
        car: {
          color: "red",
        },
      });
    //   console.log(ref2.value);
    // ref2.value='=='
    // ref2.value.car='=='
    console.log(isRef(ref({})));
    console.log(isReactive(reactive({})));
    console.log(isReadonly(readonly({})));
    console.log(isProxy(reactive({})));
    console.log(isProxy(readonly({})));
    </script>
  </body>
</html>
